<template>
  <el-carousel trigger="click" class="container header-images">
    <el-carousel-item v-for="(item, index) in images" :key="index">
      <img :src="item.src" class="carousel-image" alt="轮播图图片加载中" />
      <div class="caption-box">
        <p>{{ item.message }}</p>
      </div>
    </el-carousel-item>
  </el-carousel>
  <!-- 新闻板块 -->
  <div class="container my-5">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <!-- 使用 v-for 循环遍历 newsItems -->
      <div class="col" v-for="(item, index) in newsList" :key="index">
        <div class="card h-100">
          <div class="card-body card-details">
            <h5 class="card-title text-title">{{ item.title }}</h5>
            <p class="card-text">{{ item.description }}</p>
            <button class="card-button">进入查看</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 通知公告与新闻板块 -->
  <div class="container">
    <div class="row">
      <div class="col-md-5 me-auto">
        <!-- 通知公告 -->
        <div class="mb-4">
          <div class="row align-items-center mb-4 line">
            <div class="col-12">
              <span class="mb-0 h3 me-3" style="color: #5e4da4">通知公告</span>
              <span>NOTICE</span>
            </div>
          </div>
          <ul class="list-group list-with-custom-bullet">
            <li
              v-for="(news, index) in noticeList"
              :key="index"
              class="list-group-item"
            >
              {{ news.title }}
            </li>
          </ul>
          <!-- 更多按钮 -->
          <button class="button mt-3">更多 &gt;</button>
        </div>
      </div>
      <div class="col-md-6 ms-auto">
        <!-- 实验室新闻 -->
        <div class="news-container">
          <!-- 标题 -->
          <div class="row">
            <div class="col-12">
              <div class="row align-items-center mb-4 line">
                <div class="col-12">
                  <span class="mb-0 h3 me-3" style="color: #5e4da4"
                    >实验室新闻</span
                  >
                  <span>LABORATORY NEWS</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 新闻列表 -->
          <div
            class="news-item"
            v-for="item in newsList"
            :key="item.id"
            @click="viewNewsDetail(item.id)"
          >
            <div class="row g-0 mb-4">
              <!-- 日期部分 -->
              <div class="col-2">
                <div class="date-box text-center">
                  <div class="year-month">{{ item.date.yearMonth }}</div>
                  <div class="day">{{ item.date.day }}</div>
                </div>
              </div>

              <!-- 内容部分 -->
              <div class="col-10 ps-3">
                <div class="news-content">
                  <h5 class="news-title clamp-text">{{ item.title }}</h5>
                  <p class="summary clamp-text" v-if="item.summary">
                    {{ item.summary }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- 更多按钮 -->

          <router-link to="/all-news" class="button mt-3">
            更多 &gt; <i class="bi bi-arrow-right ms-1"></i>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
// 使用 Vue Router
const router = useRouter();
// 存取轮播图的图片数组
const images = ref([
  { src: require("@/assets/images/1.jpg"), message: "说明文字一" },
  { src: require("@/assets/images/2.jpg"), message: "说明文字二" },
  { src: require("@/assets/images/3.jpg"), message: "说明文字三" },
  { src: require("@/assets/images/4.jpg"), message: "说明文字四" },
]);

const newsList = ref([
  {
    id: 1,
    date: { yearMonth: "2025/05", day: "29" },
    title: "实验室召开第一届学术委员会第五次会议",
    summary:
      "新材料力学理论与应用湖北省重点实验室第一届学术委员会第五次会议于2024年1月8日，在武汉以线上线下相结合的形式举行。副校长王发洲、实验室学术委员会全体委员出席会议。科发院、理学院相关负责人及实验室骨干研究人员代表参加了会议。",
  },
  {
    id: 2,
    date: { yearMonth: "2025/05", day: "29" },
    title: "实验室黄写格博士入选首批中国科协青托工程专项计划",
    summary: '经济与管理学院第十届"阳光伙伴"趣味运动会举行',
  },
  {
    id: 3,
    date: { yearMonth: "2025/04", day: "28" },
    title: "实验室晏石林教授团队在固体力学领域顶级期刊IJMS上发表最新研究成果",
    summary:
      "近日，武汉理工大学理学院、新材料理论与应用湖北省重点实验室的研究成果“Multi-dimensional hybridized TPMS with high energy absorption capacity”发表在固体力学领域顶级期刊IJMS(International Journal of Mechanical Sciences)2024年第273卷上。论文由张晓楠、晏石林、谢翔宇、李永静、王成和文聘等人合作完成。其中，直博生张晓楠为第一作者，晏石林教授为通讯作者，这是本校力学学科独自在IJMS上发表的一篇重要学术论文。",
  },
]);
// 查看新闻详情
const viewNewsDetail = (id) => {
  router.push(`/news/${id}`);
};
// 通知公告数据数组
const noticeList = [
  { title: "先进材料教育部重点实验室2024年..." },
  { title: "先进材料教育部重点实验室2024年..." },
  { title: "2023年先进材料教育部重点实验室..." },
  { title: "先进材料教育部重点实验室2023年..." },
  { title: "先进材料教育部重点实验室2024年..." },
  { title: "先进材料教育部重点实验室2024年..." },
];
</script>
<style scoped>
.header-images {
  height: 300px;
  @media (max-width: 768px) {
    height: 280px;
  }
}
/* 同时设置内部容器高度 */
.header-images .el-carousel__container {
  height: 100% !important;
}
.el-carousel {
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.caption-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  background-color: rgba(43, 57, 118, 0.5);
  color: white;
  text-align: left;
  text-indent: 2em;
  font-size: 2rem;
}
@media (max-width: 768px) {
  .caption-box {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: rgba(43, 57, 118);
    color: white;
    text-align: left;
    text-indent: 1em;
    font-size: 1rem;
  }
}

/* 新闻板块修饰 */
.card {
  border-radius: 20px;
  background: #f5f5f5;
  position: relative;
  padding: 1.8rem;
  border: 2px solid #c3c6ce;
  transition: 0.5s ease-out;
  overflow: visible;
}

.card-details {
  color: var(--site-color);
  height: 100%;
  gap: 0.5em;
  display: grid;
  place-content: center;
}

.card-button {
  transform: translate(-50%, 125%);
  width: 60%;
  border-radius: 1rem;
  border: none;
  background-color: rgba(26, 2, 126, 0.3);
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transition: 0.3s ease-out;
}

.card-text {
  color: rgb(134, 134, 134);
}

/*Text*/
.text-title {
  font-size: 1.5em;
  font-weight: bold;
}

/*Hover*/
.card:hover {
  border-color: var(--site-color);
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.card:hover .card-button {
  transform: translate(-50%, 50%);
  opacity: 1;
}

.line {
  letter-spacing: 5px;
  border-bottom: 2px solid rgba(26, 2, 126, 0.6);
  padding-bottom: 10px;
}
.list-with-custom-bullet .list-group-item::before {
  content: "•";
  margin-right: 0.5em;
  color: #000;
  font-size: 1em;
}
.list-group-item {
  list-style-type: disc;
  font-size: 1.2rem;
  border-bottom: 1px dashed #ddd;
  padding: 10px 0;

  color: var(--site-color);
}
@media (min-width: 1000px) {
  .list-group-item {
    text-indent: 2em;
  }
}
/* 更多按钮 */

.button {
  position: relative;
  padding: 10px 22px;
  border-radius: 12px;
  border: none;
  color: #fff;
  text-decoration-line: none;
  cursor: pointer;
  background-color: #1a027e;
  transition: all 0.2s ease;
}

.button:active {
  transform: scale(0.96);
}

.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}

.button:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #1a027e 20%, transparent 30%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #1a027e 15%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.button:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #1a027e 15%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%),
    radial-gradient(circle, #1a027e 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

/* 实验室新闻修饰 */
.news-container {
  padding-bottom: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.news-item {
  transition: box-shadow 0.4s ease-in-out, transform 0.3s ease-in-out;
}
.news-item:hover {
  cursor: pointer;
  transform: translateY(-3px);
  transition: property duration ease;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.date-box {
  background-color: #f8f9fa;
  padding: 0.5rem;
  border-radius: 8px;
}

.year-month {
  font-size: 0.9rem;
  color: #6c757d;
}

.day {
  font-size: 1.75rem;
  font-weight: bold;
  color: #2c3e50;
}

.news-content {
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.news-title {
  color: var(--site-color);
  margin-bottom: 0.5rem;
}

.summary {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.clamp-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 95%;
}

@media (max-width: 768px) {
  .news-container {
    padding: 1rem;
  }

  .day {
    font-size: 1.5rem;
  }
}
</style>